<template>
	<view class="input-area">
		<view class="input-box">
			<input v-model="localInputText" placeholder-class="input-pl"
				:placeholder="isLoading ? '正在思考中...' : '给 小灵 发送消息'" @confirm="onSendMessage" :disabled="false"
				:cursor-color="isLoading ? '#00000000' : themeData['color_primary']" />
		</view>

		<view class="bottom">
			<view class="model-selector">
				<view v-for="model in models" :key="model.value"
					:class="{ active: selectedModel === model.value, mode: true }" @click="updateModel(model.value)">
					{{ model.label }}
				</view>
			</view>
			<view class="right">
				<view @click="onSendMessage" :disabled="isLoading" class="send">
					<icon v-if="!isLoading" class="icon-send iconfont bs-send"></icon>
					<icon v-else class="stop"></icon>
				</view>
				<view @click="goAvatar" :disabled="isLoading" class="talk">
					<icon class="icon-talk iconfont bs-talk"></icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { defineProps, defineEmits } from 'vue';
import { storeToRefs } from 'pinia';
import ThemeColorUtil from "@/jzutils/ThemeColorUtil";
import ThemeLangUtil from "@/jzutils/ThemeLangUtil";

const themeStore = ThemeColorUtil.useThemeStore();
const langStore = ThemeLangUtil.useLangStore();
const { themeData } = storeToRefs(themeStore);
const { langData } = storeToRefs(langStore);

// 定义传入属性
const props = defineProps({
	isLoading: {
		type: Boolean,
		required: true
	},
	inputText: {
		type: String,
		required: true
	},
	models: {
		type: Array,
		required: true
	},
	selectedModel: {
		type: String,
		required: true
	}
});

// 定义事件，用于向父组件传递更新数据及发送消息事件
const emit = defineEmits(['send-message', 'update:selectedModel', 'update:inputText', 'stopSend']);

// 本地双向绑定输入文本
const localInputText = ref(props.inputText);

// 监听父组件 inputText 变化，同步本地值
watch(() => props.inputText, (newVal) => {
	localInputText.value = newVal;
});

// 更新模型选择
function updateModel(value: string) {
	emit('update:selectedModel', value);
}

// 触发发送消息事件
function onSendMessage() {
	if (!props.isLoading) {
		emit('update:inputText', localInputText.value);
		emit('send-message');
		localInputText.value = '';
	} else {
		emit('stopSend')
	}
}

// 触发跳转头像事件
function goAvatar() {
	uni.navigateTo({
		url: '/pages/avatar/avatar'
	});
}
</script>

<style scoped lang="scss">
@import "/dam_uni_frame/styles/dam_theme_common.scss";
@import "/static/css/iconfont.css";

.input-area {
	max-height: 100px;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	width: 100%;
	background: white;
	padding: 20rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.model-selector,
		.right {
			display: flex;

			view {
				font-size: 12px;
				border-radius: 30px;
				background: #ecedf3;
				color: #83868b;
				margin: 10px 0;
				transition: all 0.3s ease;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
				padding: 6px 10px;
				margin-right: 10px;

				&:last-child {
					margin-right: 0;
				}

				&.active {
					background: #d2e6ff;
					color: #3c9cff;
					box-shadow: 0 3px 8px rgba(60, 156, 255, 0.2);
				}
			}

		}

		.right {
			.send {
				padding: 5px;
				background: linear-gradient(135deg, #22c4ff, #2196f3);
				color: white;
				height: 30px;
				width: 30px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0 3px 10px rgba(34, 196, 255, 0.3);
				transition: all 0.3s ease;

				&:active {
					box-shadow: 0 5px 15px rgba(34, 196, 255, 0.4);
				}

				.stop {
					border-radius: 20%;
					background: white;
					width: 65%;
					height: 65%;
					display: flex;
					justify-content: center;
					align-items: center;
					transition: all 0.2s ease;
				}

				.icon-send {
					font-size: 20px;
					color: white;
				}


			}

			.talk {
				padding: 5px;
				background: linear-gradient(135deg, #c081d5, #a604dc);
				color: white;
				height: 30px;
				width: 30px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0 3px 10px rgba(34, 196, 255, 0.3);
				transition: all 0.3s ease;


				&:active {
					box-shadow: 0 5px 15px rgba(34, 196, 255, 0.4);
				}



				.icon-talk {
					font-size: 20px;
					color: white;
				}
			}


		}
	}

	.input-pl {
		color: #83868b;
		font-size: 16px;
		// font-weight: bold;
	}



	.input-box {
		display: flex;

		input {
			max-height: 60px;
			flex: 1;
			background: #ecedf3;
			padding: 10px 18px;
			border-radius: 30px;
		}
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}
</style>